<template>
	<view>
		<uni-card padding="0">
			<view class="xd-card">
				<view class="header">{{xdCard.name||"新卡标题"}}</view>
				<view class="customer">
					<view class="name">客户：{{xdCard.customer}}</view>
					<view class="mobile">手机：{{xdCard.mobile}}</view>
				</view>
				<view class="customer">
					<view class="name">开卡：{{xdCard.createDate}}</view>
					<view class="mobile">有效期：{{xdCard.validityDate}}</view>
				</view>
				<uni-grid :column="xdCard.columnNum" >
					<uni-grid-item v-for="(item, index) in cardSum"
						:index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<text class="text">{{item>xdCard.count?'':item}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
				<view class="tip">
					<text>{{xdCard.tip}}</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		name: "xdcard",
		props: {
			cardData: Object
		},
		data() {
			return {
				defaultDate: {
					//卡固定信息
					columnNum:8,
					// 制卡信息
					id:null,
					name: '小鼎',
					count: 30,
					validity: 1,
					tip: '欢迎来店洽谈，电话号：150*******',
					// 客户信息
					customer:'小鼎',
					mobile:'150********',
					createDate:'',
					validityDate:'',
				}
			};
		},
		computed:{
			xdCard(){
				return {
					...this.defaultDate,
					...this.$props.cardData
				}
			},
			cardSum(){
				return Math.ceil(this.xdCard.count/this.xdCard.columnNum)*this.xdCard.columnNum
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.xd-card {
		align-items: center;
		text-align: center;
		color: deepskyblue;

		.header {
			font-size: 36rpx;
			font-weight: 700;
			padding-top: 20rpx;
			padding-bottom: 10rpx
		}

		.customer {
			@include flex;
			align-items: center;
			font-size: 28rpx;

			.name {
				text-align: left;
				flex: 1;
			}

			.mobile {
				text-align: right;
				flex: 1;
			}
		}

		.tip {
			font-size: 28rpx;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
		}
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
